<template>
	<div class = "wrap">
		<div class = "imgWrap">
			<img :src="info.hp_img_url" alt="">
		</div>
		<p class = "author">
			<span>{{info.hp_title}}</span>
			<span>{{info.hp_author}}</span>
		</p>
		<div class = "date">
			<span>{{day}}</span><br />
			<span>{{month}}. {{year}}</span>
		</div>
		<p class = "content">{{info.hp_content}}</p>
		<download></download>
		<paging></paging>
	</div>
</template>

<script>
import axios from "axios"
import download from '@/common/download'
import paging from '@/common/paging'
export default {
	name : 'oneDetail',
	data () {
		return {
			type : "one"
		}
	},
	components : {
		download,
		paging
	},
	data () {
		return {
			info : {
				maketime:""
			},
			monthArr : ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dec"]
		}
	},
	methods : {
		getDetailInfo () {
			axios.get("http://v3.wufazhuce.com:8000/api/hp/detail/"+this.$route.params.one_id).then(this.getDetailInfoSucc);
		},
		getDetailInfoSucc (res) {
			if(res.data.res === 0 && res.data.data){
				this.info = res.data.data;
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		}
	},
	mounted () {
		this.getDetailInfo();
	},
	computed : {
		day () {
			let str = this.info.maketime;
			return str.substr(8,2);
		},
		month () {
			let str = this.info.maketime;
			return this.monthArr[parseInt(str.substr(5,2)) -1];
		},
		year () {
			let str = this.info.maketime;
			return str.substr(0,4);
		}
	}
}
</script>

<style lang = "less" scoped>
	.wrap {
		padding-top:.88rem;
		.imgWrap {
			height:0;
			overflow:hidden;
			padding-bottom:66.66%;
			margin:.2rem 0 .5rem; 
			img {
				width:100%;
				float:left;
			}
		}
		.author {
			padding:0 .4rem;
			overflow: hidden;
			span {
				&:nth-of-type(1){
					float:left;
				}
				&:nth-of-type(2){
					float:right;
				}
			}
		}
		.date {
			text-align: center;
			margin-top:.4rem;
			span {
				&:nth-of-type(1){
					font-size:.96rem;
				}
				&:nth-of-type(2){
					font-size:.3rem;
					line-height:.5rem;
					padding:0 .4rem .4rem;
					border-bottom:.02rem solid #eee;
				}
			}
		}
		.content {
			text-align: left;
		    font-size: .32rem;
		    line-height: .52rem;
		    padding:.8rem .6rem .36rem;
		}
	}
</style>